<template>
  <el-dialog
    v-el-drag-dialog="{ updataFull, updataDialogWidth }"
    :fullscreen="isfullscreen"
    :width="setDialogWidth('1000px')"
    :visible="visible"
    :title="this.$t('VIEW_LINK_SEGMENT')"
    @open="open"
    @close="close"
  >
    <div class="flex flex-wrap dialog-detail">
      <div class="w-100">
        <span class="title-label">{{ $t('LINK_SEGMENT_NAME') }}:</span>
        <span>
          {{ formData.segmentName }}
        </span>
      </div>
      <div class="w-50">
        <span class="title-label">{{ $t('A_END_REGIONAL_STATION_NAME') }}:</span>
        <span> {{ formData.startStationName }}</span>
      </div>
      <div class="w-50">
        <span class="title-label">{{ $t('Z_END_REGIONAL_STATION_NAME') }}:</span>
        <span> {{ formData.endStationName }}</span>
      </div>
      <div class="w-50">
        <span class="title-label">{{ $t('A_END_ROOM_NAME') }}:</span>
        <span> {{ formData.startRoomName }}</span>
      </div>
      <div class="w-50">
        <span class="title-label">{{ $t('Z_END_ROOM_NAME') }}:</span>
        <span> {{ formData.endRoomName }}</span>
      </div>
      <div class="w-50">
        <span class="title-label">{{ $t('ANODE') }}:</span>
        <span> {{ formData.startNode.nodeName }}</span>
      </div>
      <div class="w-50">
        <span class="title-label">{{ $t('ZNODE') }}:</span>
        <span> {{ formData.endNode.nodeName }}</span>
      </div>
      <div class="w-100">
        <span class="title-label">{{ $t('SEGMENT_INFO') }}:</span>
        <div class="w-100 flex-1">
          <el-table
            ref="channelTable"
            :data="formData.networkSegmentList"
            size="mini"
            max-height="300"
            border
          >
            <template slot="empty">
              <NullData />
            </template>
            <el-table-column :label="$t('SEGMENT_NAME')" prop="segmentName" width="200" />
            <el-table-column :label="$t('A_END_REGIONAL_STATION_NAME')">
              <template v-slot="scope">
                {{ getRegionName(scope.row.startStationId) }}
              </template>
            </el-table-column>
            <el-table-column :label="$t('ANODE')" prop="startNode.nodeName" show-overflow-tooltip />
            <el-table-column
              :label="$t('CABLE_NAME')"
              prop="cable.cableName"
              show-overflow-tooltip
            />
            <el-table-column :label="$t('ZNODE')" prop="endNode.nodeName" show-overflow-tooltip />
            <el-table-column :label="$t('Z_END_REGIONAL_STATION_NAME')">
              <template v-slot="scope">
                {{ getRegionName(scope.row.endStationId) }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <template v-slot:footer>
      <el-button @click="close">{{ $t('CLOSE') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { getParentsById } from '@/utils/common'

  export default {
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      rowData: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        formData: {
          startNode: {},
          endNode: {},
          segmentList: []
        }
      }
    },
    computed: {
      ...mapGetters(['baseRegionList', 'stationTree'])
    },
    created() {
      console.log(this.$options.data())
    },
    methods: {
      open() {
        this.formData = this.rowData
      },
      // 获取区域/站点
      getRegionName(regionId) {
        const parents = getParentsById(this.stationTree, regionId, 'regionId') || []
        return parents
          .reverse()
          .map(i => i.regionName)
          .join('/')
      },
      close(load) {
        this.$emit('close', load)
      }
    }
  }
</script>

